<template>
	<view class="container">
		<localPop :show="unfold_show" @close="unfold_show = false">
			<view class="unfold_box" :style="{background: `linear-gradient(to right, ${lightColor}, ${lightColor1} 700rpx)`}">
				<view class="backColor">
					<view class="goods_main">
						<view class="goods_item _clickActive" @click="clickItem(item, index)" v-for="(item, index) in category_list" :key="index">
							<image
								class="image"
								lazy-load
								:style="{border: category_index==index?`4rpx solid ${_temp_themeColor}`:''}"
								:class="[category_index==index?'active_border':'']"
								:src="item.icon"
								mode="aspectFill"
							></image>
							<view class="goods_title">
								<text
									class="title"
									:style="{backgroundColor: category_index==index?_temp_themeColor:''}"
									:class="[category_index==index?'active_title':'']"
								>
									{{item.categoryName}}
								</text>
							</view>
						</view>
					</view>
					<view class="bottom" @click="unfold_show = false">
						<text>点击收起</text>
						<u-icon name="arrow-up" size="12"></u-icon>
					</view>
				</view>
			</view>
		</localPop>
		<!-- 一级分类 -->
		<view class="scroll_box">
			<scroll-view scroll-x enable-flex class="scroll" id="scroll" scroll-with-animation :scroll-left="scrollImgList">
				<view class="goods_box">
					<view class="goods_item _clickActive" :id="'item'+index" @click="clickItem(item, index)" v-for="(item, index) in category_list" :key="index">
						<image
							class="image"
							lazy-load
							:style="{border: category_index==index?`4rpx solid ${_temp_themeColor}`:''}"
							:class="[category_index==index?'active_border':'']"
							:src="item.icon"
							mode="aspectFill"
						></image>
						<view class="goods_title">
							<text class="title" :style="{backgroundColor: category_index==index?_temp_themeColor:''}" :class="[category_index==index?'active_title':'']">{{item.categoryName}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="shade_box _clickActive" @click="unfold_show = true">
				<view class="wrap">
					<text class="text">展</text>
					<text class="text">开</text>
					<u-icon name="arrow-down-fill" size="12"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	export default {
		name:"rowSlideList",
		props: {
			category_list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				category_index: 0,
				imgLeftList: [],
				scrollImgList: 0,
				unfold_show: false,
				rowSlideHeight: 170
			};
		},
		computed: {
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.7);
				return light_color;
			},
			lightColor1 () {
				let light_color = makeLightColor(this._temp_themeColor, 0.9);
				return light_color;
			}
		},
		watch: {
			category_list () {
				this.$nextTick(() => {
					setTimeout(() => {
						this.init();
					}, 50)
				})
			}
		},
		methods: {
			init () {
				uni.getSystemInfo({
				    success: (res)=> {
						let originLeft = 66.5; // scroll-view距离左边的位置
						let scrollInfo = uni.createSelectorQuery().in(this);
						scrollInfo.select("#scroll").boundingClientRect((scrollRes)=>{
							console.log(scrollRes, 'scrollRes')
							originLeft = scrollRes.left;
						}).exec()
						
						this.category_list.forEach((i,v)=>{
							let itemInfo = uni.createSelectorQuery().in(this);
							itemInfo.select("#item"+v).boundingClientRect((itemRes)=>{
							    this.imgLeftList.push(itemRes.left - originLeft)
							}).exec()
						})
						this.imgListScroll(this.category_index);
				    }
				});
			},
			//一级分类自动滚动
			imgListScroll(index){
				if(index>=2){
					this.scrollImgList = this.imgLeftList[index-2]
				}else{
					this.scrollImgList = 0
				}
			},
			clickItem (item, index) {
				this.category_index = index;
				this.imgListScroll(index);
				this.$emit('check_item', item, index);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 170rpx;
		
		.unfold_box{
			width: 100%;
			background: radial-gradient(100% 100% at 20% 0%, #d8f3e7, #fff 100%);
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			
			.backColor{
				width: 100%;
				// background: radial-gradient(100% 100% at 90% 0%, #eaf8e0, rgba(255,255,255,0) 100%);
				padding-top: 30rpx;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				
				.goods_main{
					display: flex;
					width: 100%;
					flex-wrap: wrap;
					
					.goods_item{
						flex: 0 0 25%;
						width: 128rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-bottom: 30rpx;
						
						.goods_title{
							width: 100%;
							margin-top: 10rpx;
							text-align: center;
							
							.title{
								padding: 2rpx 10rpx;
								font-size: 24rpx;
								color: #444444;
							}
							
							.active_title{
								// background-color: $theme-color;
								color: #fff;
								border-radius: 20rpx;
								box-sizing: border-box;
							}
						}
						
						.image{
							width: 90rpx;
							height: 90rpx;
							border-radius: 20rpx;
							border: 4rpx solid #fff;
						}
						.active_border{
							// border: 4rpx solid $theme-color;
						}
					}
				}
				.bottom{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
					border-top: 1rpx solid #ddd;
					color: #7f7f7f;
					
					text{
						padding: 0 10rpx;
						font-size: 26rpx;
					}
				}
			}
		}
		
		.scroll_box{
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			position: relative;
			box-sizing: border-box;
			height: 170rpx;
			padding-bottom: 20rpx;
			
			.scroll{
				width: 670rpx;
				height: 150rpx;
				white-space: nowrap;
				display: flex;
				
				.goods_box{
					display: flex; 
					white-space: nowrap;
					
					.goods_item{
						width: 134rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.goods_title{
							width: 100%;
							margin-top: 10rpx;
							text-align: center;
							overflow: hidden;
							
							.title{
								padding: 2rpx 10rpx;
								font-size: 24rpx;
								color: #444444;
							}
							
							.active_title{
								// background-color: $theme-color;
								color: #fff;
								border-radius: 20rpx;
								box-sizing: border-box;
							}
						}
						
						.image{
							width: 90rpx;
							height: 90rpx;
							border-radius: 20rpx;
							border: 4rpx solid #fff;
						}
						.active_border{
							border: 4rpx solid $theme-color;
						}
					}
				}
			}
			.shade_box{
				width: 60rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				// background-color: #eaf8e0;
				position: absolute;
				right: 0;
				top: 0;
				
				
				.wrap{
					width: 100%;
					height: 80%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					padding: 30rpx 0;
					box-sizing: border-box;
					box-shadow: -10rpx 0 20rpx -10rpx #dedede;
					font-size: 26rpx;
				}
			}
		}
	}
</style>